---
title: Password Input
description: Used to collect passwords.
composition: true
---

<ExampleTabs name="password-input-basic" />

## Setup

If you don't already have the snippet, run the following command to add the
`password-input` snippet

```sh
npx @chakra-ui/cli snippet add password-input
```

The snippet includes a closed component composition for the `PasswordInput`
component.

## Usage

```jsx
import {
  PasswordInput,
  PasswordStrengthMeter,
} from "@/components/ui/password-input"
```

```jsx
<PasswordInput />
<PasswordStrengthMeter />
```

## Examples

### Sizes

Use the `size` prop to change the size of the password input.

:::info

The password input sizes are mapped to the `Input` component sizes.

:::

<ExampleTabs name="password-input-with-sizes" />

### Controlled

Use the `value` and `onChange` props to control the current page.

<ExampleTabs name="password-input-controlled" />

### Hook Form

Here's an example of how to use the `PasswordInput` component with
`react-hook-form`.

<ExampleTabs name="password-input-with-hook-form" />

### Controlled Visibility

Use the `visible` and `onVisibleChange` props to control the visibility of the
password input.

<ExampleTabs name="password-input-controlled-visibility" />

### Strength Indicator

Render the `PasswordStrengthMeter` component to show the strength of the
password. Compute the `value` prop based on the password input `value`.

<ExampleTabs name="password-input-with-strength-indicator" />

## Props

### Root

<PropTable component="PasswordInput" part="PasswordInput" />
